import 'package:flutter/material.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';
import '../../models/order_detail_model.dart';
import '../../manger/cached_image_widget.dart';

class DetailPcInfoView extends StatelessWidget {
  final DetailInfoModel model;

  DetailPcInfoView({required this.model});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      padding: EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 15),
      margin: EdgeInsets.all(15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Product Details Title
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Text(
              AppLocalizations.of(context)!.productDetails,
              style: TextStyle(
                color: Color(0xFF252525),
                fontSize: 15,
              ),
            ),
          ),
          const Divider(height: 1, color: Color(0xFFF5F5F5)),
          SizedBox(height: 15),
          
          // Product Icon and Details
          Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(13),
              child: CachedImage(
                width: 80,
                height: 80,
                imageUrl: model.pic,
                fit: BoxFit.cover,
                placeholderPath: 'assets/images/placeholderImage.png',
              ),
            ),
            SizedBox(width: 12),
            Expanded(  // 使用 Expanded 来限制宽度
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 5),
                  Text(
                    model.spuName,
                    style: TextStyle(fontSize: 16, color: Colors.black, fontWeight: FontWeight.bold),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    softWrap: false,
                  ),
                  SizedBox(height: 4),
                  Text(
                    model.attrValue,
                    style: TextStyle(fontSize: 12, color: Color(0xFF666666)),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                         isChineseLocale() ? "共${model.num.toStringAsFixed(0)}件" : 'Quantity:${model.num.toStringAsFixed(0)}',
                        style: TextStyle(fontSize: 12, color: Color(0xFF666666)),
                      ),
                      SizedBox(width: 30),
                      Text(
                        '${AppLocalizations.of(context)!.unitPrice}：${model.symbol}${model.priceFee}',
                        style: TextStyle(fontSize: 14, color: Color(0xFF666666)),
                        textAlign: TextAlign.right,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),

          SizedBox(height: 15),
          const Divider(height: 1, color: Color(0xFFF5F5F5)),
          SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                AppLocalizations.of(context)!.originalPrice,
                style: TextStyle(fontSize: 14, color: Color(0xFF666666)),
              ),
              Text(
                '+ ${model.symbol}${model.subtotalMoney}',
                style: TextStyle(fontSize: 15, color: Colors.black),
              ),
            ],
          ),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                AppLocalizations.of(context)!.handlingFee,
                style: TextStyle(fontSize: 14, color: Color(0xFF666666)),
              ),
              Text(
                '+ ${model.symbol}${model.fee}',
                style: TextStyle(fontSize: 15, color: Colors.black),
              ),
            ],
          ),

          if (double.tryParse(model.couponsPrice) != null && double.parse(model.couponsPrice) > 0)

            Padding(
              padding: const EdgeInsets.only(top: 16, bottom: 8),
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    AppLocalizations.of(context)!.discountDeduction,
                    style: TextStyle(fontSize: 14, color: Color(0xFF666666)),
                  ),
                  Text(
                    '- ${model.symbol}${model.couponsPrice}',
                    style: TextStyle(fontSize: 15, color: Colors.red),
                  ),
                ],
              ),
            ),
          
          if (model.payBalance > 0)
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    AppLocalizations.of(context)!.balanceDeduction,
                    style: TextStyle(fontSize: 14, color: Color(0xFF666666)),
                  ),
                  Text(
                    '- ${model.symbol}${model.payBalance}',
                    style: TextStyle(fontSize: 15, color: Colors.red),
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}